<template>
	<div class="wrapper">

		<!-- header部分 -->
		<header>
			<p>在线支付</p>
		</header>
		<div class="countDown" v-show="mostTime-lastTime>=0">倒计时：00：{{(mostTime-lastTime)>=10?'':0}}{{mostTime-lastTime}}</div>

		<!-- 订单信息部分 -->
		<h3>订单信息：</h3>
		<div class="order-info">
			<p>
				{{orders.business.businessName}}
				<i class="fa fa-caret-down" @click="detailetShow()"></i>
			</p>
			<p>&#165;{{orders.orderTotal}}</p>
		</div>

		<!-- 订单明细部分 -->
		<ul class="order-detailet" v-show="isShowDetailet">
			<li v-for="item in orders.list">
				<p>{{item.food.foodName}} x {{item.quantity}}</p>
				<p>&#165;{{item.food.foodPrice*item.quantity}}</p>
			</li>
			<li>
				<p>配送费</p>
				<p>&#165;{{orders.business.deliveryPrice}}</p>
			</li>
			<li>
				<p>积分抵扣</p>
				<p>-&#165;{{orders.discount}}</p>
			</li>
			<li>
				<p>积分</p>
				<p>+ {{parseInt(orders.orderTotal)}}</p>
			</li>
		</ul>

		<!-- 支付方式部分 -->
		<ul class="payment-type">
			<li @click="changePaymentWay(1)">
				<img src="../assets/alipay.png">
				<i class="fa fa-check-circle" v-show="paymentWay == 1"></i>
			</li>
			<li @click="changePaymentWay(2)">
				<img src="../assets/wechat.png">
				<i class="fa fa-check-circle"  v-show="paymentWay == 2"></i>
			</li>
		</ul>
		<div class="payment-button">
			<button @click="toPayed()">确认支付</button>
		</div>
		<div class="cancel-button">
			<button @click="deleteOrder()">取消订单</button>
		</div>
		<!-- <div class="cancel-button">
			<button @click="doCancel()">取消订单</button>
		</div> -->

		<!-- 底部菜单部分 -->
		<Footer></Footer>
	</div>
</template>

<script>
	import Footer from '../components/Footer.vue'
	import {useRouter} from 'vue-router'
	import {useRoute} from 'vue-router'
	import {ref,onMounted,getCurrentInstance, reactive, onBeforeUnmount} from 'vue';
	
	export default {
	    name: 'Payment',
	    setup() {
	        const currentInstance = getCurrentInstance();
	        const router = useRouter();
	        const route = useRoute();
	        const orderId = route.params.orderId;
	        const orders = ref({ business: {} });
	        const isShowDetailet = ref(false);
	        const paymentWay = ref(1);
	        const user = ref({});
	
	        const changePaymentWay = (index) => {
	            paymentWay.value = index;
	        }
	
	        const detailetShow = () => {
	            isShowDetailet.value = !isShowDetailet.value;
	        }
	
	        const deleteOrder = () => {
	            if (confirm("确认要取消订单？")) {
	                currentInstance.appContext.config.globalProperties.$axios.post(
	                    'OrdersController/removeOrder', currentInstance.appContext.config
	                    .globalProperties.$qs.stringify({
	                        orderId: orderId
	                    }))
	                    .then(response => {
	                        if (response.data < 0) {
	                            swal("记录删除失败！");
	                            return;
	                        }
	                        currentInstance.appContext.config.globalProperties.$axios.post(
	                            'UserController/UpdateCredit', currentInstance.appContext.config
	                            .globalProperties.$qs.stringify({
	                                userId: user.value.userId,
	                                credit: user.value.userCredit + orders.value.discount * 10
	                            }))
	                            .then(response => {
	                                if (response.data < 1) {
	                                    swal("归还积分失败！");
	                                    return;
	                                }
	                                user.value.userCredit += orders.value.discount * 10;
	                                currentInstance.appContext.config.globalProperties.$setSessionStorage('user', user.value);
	                            })
	                            .catch(error => {
	                                console.error(error);
	                            });
	                        router.push({
	                            path: '/index'
	                        });
	                    })
	                    .catch(error => {
	                        console.error(error);
	                    });
	            }
	        }
	
	        const toPayed = () => {
	            currentInstance.appContext.config.globalProperties.$axios.post(
	                'OrdersController/updateOrdersState', currentInstance.appContext.config
	                .globalProperties.$qs.stringify({
	                    orderId: orderId
	                }))
	                .then(response => {
	                    if (response.data < 1) {
	                        swal("支付失败！");
	                        return;
	                    }
	                    currentInstance.appContext.config.globalProperties.$axios.post(
	                        'UserController/UpdateCredit', currentInstance.appContext.config
	                        .globalProperties.$qs.stringify({
	                            userId: user.value.userId,
	                            credit: parseInt(user.value.userCredit + orders.value.orderTotal)
	                        }))
	                        .then(response => {
	                            if (response.data < 1) {
	                                swal("积分更新失败！");
	                                return;
	                            }
	                            user.value.userCredit += parseInt(orders.value.orderTotal);
	                            currentInstance.appContext.config.globalProperties.$setSessionStorage('user', user.value);
	                            router.push({ name: 'Payed', params: { orderId: orderId } })
	                        })
	                        .catch(error => {
	                            console.error(error);
	                        });
	                })
	                .catch(error => {
	                    console.error(error);
	                });
	        }
	
	        onMounted(() => {
	            user.value = currentInstance.appContext.config.globalProperties.$getSessionStorage('user');
	            currentInstance.appContext.config.globalProperties.$axios.post(
	                'OrdersController/getOrdersById', currentInstance.appContext.config
	                .globalProperties.$qs.stringify({
	                    orderId: orderId
	                }))
	                .then(response => {
	                    orders.value = response.data;
	                    console.log(orders.value.discount);
	                })
	                .catch(error => {
	                    console.error(error);
	                });
	        });
	
	        return {
	            orderId, orders, isShowDetailet, paymentWay, user,
	            detailetShow, changePaymentWay, toPayed, deleteOrder
	        }
	    },
	    beforeUnmount() {
	        window.onpopstate = null;
	    },
	    components: {
	        Footer
	    },
	}
</script>

<style scoped>
	/*********** 总容器 ***********/
	.wrapper {
		width: 100%;
		height: 100%;
	}
	.wrapper .countDown{
		height: 12vw;
		background-color: #0097FF;
		color: #FFFFFF;
		font-size: 3.8vw;
		margin-right: 2vw;
		display: flex;
		justify-content: center;
		align-items: center;
		position: fixed;
		right: 0;
		top: 0;
		z-index: 1001;
	}
	/*********** header部分 ***********/
	.wrapper header {
		width: 100%;
		height: 12vw;
		background-color: #0097FF;
		color: #FFFFFF;
		font-size: 4.8vw;

		position: fixed;
		left: 0;
		top: 0;
		z-index: 1000;
		/* 这行代码保证header位于最顶层，不加这一行会导致商家图片遮挡header，因为默认情况下，绝对位置的元素后写的位于上层 */

		display: flex;
		justify-content: center;
		align-items: center;
	}

	/*********** 订单信息部分 ***********/
	.wrapper h3 {
		margin-top: 12vw;
		box-sizing: border-box;
		padding: 4vw 4vw 0;

		font-size: 4vw;
		font-weight: 300;
		color: #999;
	}

	.wrapper .order-info {
		box-sizing: border-box;
		padding: 4vw;
		font-size: 4vw;
		color: #666;

		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.wrapper .order-info p:last-child {
		color: orangered;
	}

	/*********** 订单信息部分 ***********/
	.wrapper .order-detailet {
		width: 100%;
	}

	.wrapper .order-detailet li {
		box-sizing: border-box;
		padding: 1vw 4vw;

		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.wrapper .order-detailet li p {
		font-size: 3vw;
		color: #666;
	}

	/*********** 支付方式部分 ***********/
	.wrapper .payment-type {
		width: 100%;
	}

	.wrapper .payment-type li {
		width: 100%;
		box-sizing: border-box;
		padding: 4vw;

		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.wrapper .payment-type li img {
		width: 33vw;
		height: 8.9vw;
	}

	.wrapper .payment-type li .fa-check-circle {
		font-size: 5vw;
		color: #38CA73;
	}

	.wrapper .payment-button {
		width: 100%;
		box-sizing: border-box;
		padding: 4vw;
	}

	.wrapper .payment-button button {
		width: 100%;
		height: 10vw;
		border: none;
		/*要把边框去掉最好把外轮廓一起去掉*/
		outline: none;
		border-radius: 4px;
		background-color: #38CA73;
		color: #FFFFFF;
	}
	
	.wrapper .cancel-button {
		width: 100%;
		box-sizing: border-box;
		padding: 4vw;
	}
	
	.wrapper .cancel-button button {
		width: 100%;
		height: 10vw;
		border: none;
		/*要把边框去掉最好把外轮廓一起去掉*/
		outline: none;
		border-radius: 4px;
		background-color: #999;
		color: #FFFFFF;
	}
	
	/* .wrapper .cancel-button {
		width: 100%;
		box-sizing: border-box;
		padding: 4vw;
	}
	.wrapper .cancel-button button {
		width: 100%;
		height: 10vw;
		border: none;
		/*要把边框去掉最好把外轮廓一起去掉*/
	/* 	outline: none;
		border-radius: 4px;
		background-color: #DDD;
		color: #FFFFFF;
	} */
</style>